﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="MyRecipe.aspx.cs" Inherits="MyRecipe" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />
    <%--<link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/demos/demos.css" />--%>
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <script src="Scripts/jquery.min.js" type="text/javascript" > </script>
    <script src="Scripts/jquery.slimscroll.js" language="javascript" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        function loadRecipes() {
            var userid = '<%=Session["Userid"]%>';
            if (userid != '') {
                $.ajax({
                    type: "POST",
                    url: "PIMServices.asmx/GetRecipeUser",
                    data: "{'UserId':'" + userid + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        BindRecipe(response);
                        //bindDragandDrop();
                    },
                    error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
                });
            }
        }

//        function AddMyMyRecipe(RecipeId, UserId, OldUser) {
//            //          alert(RecipeId);
//            //          $("#gallery li#" + RecipeId).remove();
//            //          alert("#gallery li#" + RecipeId);
//            $("#gallery li#" + RecipeId).remove();
//            $.ajax({
//                type: "POST",
//                url: "PIMServices.asmx/InsertMyRecipe",
//                data: "{'_recipeId':'" + RecipeId + "','_userId':'" + UserId + "','_oldUser':'" + OldUser + "'}",
//                contentType: "application/json; charset=utf-8",
//                dataType: "json",
//                success: function (response) {
//                    result = response.d;
//                    if (result == "OK") {
//                        alert('Add to My recipe is success!');
//                    }
//                    else {
//                        alert('This recipe is exists with user ' + UserId + '!');
//                    }
//                },
//                error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
//            });


        //        }
        function AddMyMealPlan(RecipeId) {
            $("#gallery li#" + RecipeId).remove();
            document.getElementById("<%=MealPlanRecipe.ClientID %>").value += "," + RecipeId;
        }
        function AddGrocery(RecipeId) {
            $("#gallery li#" + RecipeId).remove();
            document.getElementById("<%=GroceryRecipe.ClientID %>").value += "," + RecipeId;
        }
        function SearchRecipe() {

            $('.btn_search').click(function () {

                $.ajax({
                    type: "POST",
                    url: "PIMServices.asmx/GetRecipeUserByName",
                    data: "{'RecipeName':'" + $("#inPutSearch").val() + "','UserId':'0'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        BindRecipe(response);
                    },
                    error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
                });
            });
        }

        function BindRecipe(response) {
            var userid = '<%=Session["Userid"]%>';
            var recipe = response.d;
            var html = "";
            //alert(recipe);
            for (var i = 0; i < recipe.length; i++) {
                var varObjectID = recipe[i].RecipeID;
                var OldUser = recipe[i].UserID;
                var varObjectName;
                var varObjectNameFull;
                if (recipe[i].RecipeName != null) {
                    varObjectName = recipe[i].RecipeName.substring(0, 10);

                    varObjectNameFull = recipe[i].RecipeName;
                    if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                }
                else {
                    varObjectName = 'No Name..';
                    varObjectNameFull = 'No Name';
                }
                var varObjectImage = recipe[i].RecipeImage;
                var varUserName = recipe[i].UserName;
                var rating = recipe[i].RecipeRating;
                var serving = recipe[i].Serving;
                rating = "'" + rating + "'";

                if (varObjectImage != null) {
                    html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image">'
                    html += '<a id="' + varObjectID + ' class="none-decoration" "href="Recipe.aspx?RecipeId=' + varObjectID + '">' + varObjectName + '</a>';
                    html += '<img class="tooltip" id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;" title="<b>Description: </b>' + varObjectNameFull + '</br><b>Author: </b>' + varUserName + '</br><div class=basic data-average=' + rating + ' data-id=1></div>" onclick="ViewRecipeFullView(' + varObjectID + ')">';
                    //html += '<p>';
                    if (userid != '') {
                        html += '<a onclick="javascript:AddMyMealPlan('+ varObjectID +')" title="Add to new mealplan" class="ui-icon ui-icon-plus" style="float:right"></a>';
                        html += '<a onclick="javascript:AddGrocery(' + varObjectID +')" title="Add to grocery" class="ui-icon ui-icon-star" style="float:right"></a>';
                    }
                    //html += '</p>';
                    html += '</li>'
                }
            }
            $('#gallery').html(html);
            //init_tooltip();

        }

        function BindSuggestion() {
            var userid = '<%=Session["Userid"]%>';
            if (userid != '') {
                $.ajax({
                    type: "POST",
                    url: "PIMServices.asmx/GetRecipeUser",
                    data: "{'UserId':'" + userid + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var availableTags = '';
                        var object = response.d;
                        for (var i = 0; i < object.length; i++) {
                            var varObjectNameFull;
                            varObjectNameFull = object[i].RecipeName;

                            var Sugges = varObjectNameFull;
                            availableTags += Sugges + ",";
                        }
                        availableTags = availableTags.substring(0, availableTags.length - 1);

                        var suggestion = availableTags.split(',');
                        $("#inPutSearch").autocomplete({
                            source: suggestion
                        });
                    }
                });
            }
        }

        function ViewRecipeFullView(recipeToView) {
            self.location = "Recipe.aspx?RecipeId=" + recipeToView + "";
        }

        $(document).ready(function () {
            $('#primary-main').slimscroll({
                size: '15px'
            });
            loadRecipes();
            //BindSuggestion();
            SearchRecipe();
        });
        
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div class="search-head" style="">
    <div class="search_bg" >
            <div class="txt_box">
                <input name="searchrecipes" id="inPutSearch" class="textInputs" type="text" onfocus="javascript: if(this.value == 'Search Recipes'){ this.value = ''; }" onblur="javascript: if(this.value==''){this.value='Search Recipes';}" value="Search Recipes" size="22"></div>
            <div class="btn_search" style="height:18px">
                <img src="images/img02.jpg" alt="" width="23" height="18"></div>
    </div>
    <div class="row-image">
        <asp:ImageButton ID="BtnGroceryList" runat="server" 
            ImageUrl="~/images/img01.jpg" CssClass="img-icon" onclick="BtnGroceryList_Click"/>
    </div>
    <div class="row-image">
        <asp:ImageButton ID="ImageButton1" runat="server" 
            ImageUrl="~/images/recipe.jpg" CssClass="img-icon" onclick="BtnMealPlanList_Click"/>
    </div>
    
    <div style="clear:both"></div>
    </div>
    <div id="primary-main">
    <div id="primary-nav">
        <ul id="gallery">
        </ul>
        <input id="inputRecipeId" type="hidden" />
    </div>
    </div>
<div style="clear:both"></div>
<asp:HiddenField id="GroceryRecipe" runat="server"/>
<asp:HiddenField id="MealPlanRecipe" runat="server"/>
</asp:Content>

